<template>
  <div class="coupon-center">
    <!-- 顶部导航栏 -->
    <header class="page-header">
      <back-icon />
      <div class="search-bar">
        <input 
          type="text" 
          v-model="searchKeyword"
          placeholder="红米k80百亿补贴"
        >
      </div>
      <div class="share-icon">
        <i>⎋</i>
      </div>
    </header>

    <!-- 分类导航 -->
    <nav class="category-nav">
      <div 
        v-for="category in categories" 
        :key="category.id"
        :class="['category-item', { active: currentCategory === category.id }]"
        @click="currentCategory = category.id"
      >
        {{ category.name }}
      </div>
    </nav>

    <!-- 精选好券标题 -->
    <div class="section-title">
      <span>精选好券</span>
      <span class="subtitle">人工比价 券后更低</span>
    </div>

    <!-- 优惠券网格 -->
    <div class="coupon-grid">
      <div class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
        <img :src="coupon.image" :alt="coupon.title" class="product-image">
        <div class="product-info">
          <div class="tags">
            <span v-if="coupon.tag" class="tag">{{ coupon.tag }}</span>
            <span v-if="coupon.freeShipping" class="free-shipping">退货包运费</span>
          </div>
          <h3 class="product-title">{{ coupon.title }}</h3>
          <div class="price-info">
            <span class="discount-price">券后价 ¥{{ coupon.discountPrice }}</span>
            <span class="claim-progress">券已领{{ coupon.claimProgress }}%</span>
          </div>
          <div class="coupon-info">
            <span class="coupon-amount">¥{{ coupon.amount }}</span>
            <span class="no-threshold">无门槛券</span>
            <button class="claim-btn">立即领取</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import BackIcon from '@/components/BackIcon.vue'

const searchKeyword = ref('')
const currentCategory = ref('featured')

const categories = [
  { id: 'featured', name: '精选' },
  { id: 'electronics', name: '家电数码' },
  { id: 'household', name: '家居百货' },
  { id: 'food', name: '食品生鲜' },
  { id: 'beauty', name: '美家' }
]

const coupons = ref([
  {
    id: 1,
    title: '【高弹软感】2025极速退款',
    image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/157885/26/52647/63028/673ad690Faafffb6d/4b9f730bc363ff8a.jpg',
    discountPrice: '5.7',
    amount: '21',
    claimProgress: 1,
    tag: '百亿补贴',
    freeShipping: true
  },
  {
    id: 2,
    title: '影巨人YS7',
    image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/157885/26/52647/63028/673ad690Faafffb6d/4b9f730bc363ff8a.jpg',
    discountPrice: '6.2',
    amount: '2',
    claimProgress: 6,
    tag: '百亿补贴',
    freeShipping: true
  },
  {
    id: 3,
    title: '雪山袜子男款',
    image: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/157885/26/52647/63028/673ad690Faafffb6d/4b9f730bc363ff8a.jpg',
    discountPrice: '3.01',
    amount: '10',
    claimProgress: 91,
    tag: '情人节',
    freeShipping: true
  }
])
</script>

<style scoped>
.coupon-center {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f23030;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-bar {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 4px 12px;
}

.search-bar input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}

.share-icon {
  color: white;
  font-size: 20px;
}

.category-nav {
  display: flex;
  background: white;
  overflow-x: auto;
  position: sticky;
  top: 52px;
  z-index: 99;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-item {
  padding: 12px 16px;
  white-space: nowrap;
  font-size: 14px;
  position: relative;
}

.category-item.active {
  color: #f23030;
}

.category-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #f23030;
}

.section-title {
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subtitle {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}

.coupon-grid {
  padding: 0 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.coupon-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-info {
  padding: 8px;
}

.tags {
  margin-bottom: 4px;
}

.tag {
  background: #ffd6e0;
  color: #f23030;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
  margin-right: 4px;
}

.free-shipping {
  color: #999;
  font-size: 12px;
}

.product-title {
  font-size: 13px;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.discount-price {
  color: #f23030;
  font-size: 13px;
}

.claim-progress {
  font-size: 11px;
  color: #999;
}

.coupon-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.coupon-amount {
  color: #f23030;
  border: 1px solid #f23030;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 12px;
}

.no-threshold {
  font-size: 11px;
  color: #999;
}

.claim-btn {
  margin-left: auto;
  background: #f23030;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

@media (min-width: 768px) {
  .coupon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>